import React from 'react'
// ===================================================================== Temp
import Table from '#cpt/temp/Table'
import Controls from '#cpt/temp/Controls'
import TableControls from '#cpt/temp/TableControls'
import Confirm from '#cpt/temp/Confirm'
import AddEditModal from '#cpt/temp/AddEditModal'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== private component
const Box 		= $Lazy.load(()=>import('#tp/box/box'))
const $cache 	= $Lazy.file(()=>import('#private/cache-api'))
// ===================================================================== data
const setData = function({value,formData}, name){
	const data = $fn.copy(this.value)
	const index = data.findIndex(v => +v.code === +value )
	
	data.splice(index, 1)
	$fn.setRow(formData, name, data)
	this.setState({ formData })
}
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		selectedKeys:[],
		selectedRows:[],
		// 提交表单列表
		formData : [
			{ label: '参考值类别名称',			name: 'ref_type_name', 									half:true },
			{ label: '参考值类别名称(英)',  		name: 'en_ref_type_name', 								half:true },
			{ label: '性别',  					name: 'sex', 											width:'33%', type:'select', idStr:'code' },
			{ label: '年龄单位',  				name: 'age_unit', 										width:'33%', type:'select', idStr:'code' },
			{ label: '排序',  					name: 'sort', 								width:'33%',type:'number', },
			// { label: '年龄(低)',  				names: ['age_min_type','age_min_val'], 					...selectInput, title:'报告单特性' },
			// { label: '年龄(高)',  				names: ['age_max_type','age_max_val'], 					...selectInput },
			// { label: '危急值(低)',  				names: ['crisis_min_type','crisis_min_val'], 			...selectInput },
			// { label: '危急值(高)',  				names: ['crisis_max_type','crisis_max_val'],			...selectInput },
			// { label: '参考值(低)',  				names: ['reference_min_type','reference_min_val'], 		...selectInput },
			// { label: '参考值(高)',  				names: ['reference_max_type','reference_max_val'],		...selectInput },
			{ label: '年龄(低)',  				name: 'age_min_type', 	width:'29%', 	type:'select', idStr:'code', title:'报告单特性', onValue:option=>setData.call(this,option,'age_max_type') },
			{ label: '',  						name: 'age_min_val', 	width:'21%', 	type:'number', style:{paddingLeft:10}, p:'年龄（低）' },
			{ label: '年龄(高)',  				name: 'age_max_type', 	width:'29%', 	type:'select', idStr:'code', onValue:option=>setData.call(this,option,'age_min_type') },
			{ label: '',  						name: 'age_max_val', 	width:'21%', 	type:'number', style:{paddingLeft:10}, p:'年龄（高）' },
			
			{ label: '危急值(低)',  				name: 'crisis_min_type', 	width:'29%', 	type:'select', idStr:'code', onValue:option=>setData.call(this,option,'crisis_max_type') },
			{ label: '',  						name: 'crisis_min_val', 		width:'21%', 	type:'number', style:{paddingLeft:10}, p:'危机值（低）' },
			{ label: '危急值(高)',  				name: 'crisis_max_type', 	width:'29%', 	type:'select', idStr:'code', onValue:option=>setData.call(this,option,'crisis_min_type') },
			{ label: '',  						name: 'crisis_max_val', 	width:'21%', 	type:'number', style:{paddingLeft:10}, p:'危机值（高）' },
			
			{ label: '参考值(低)',  				name: 'reference_min_type', 	width:'29%', 	type:'select', idStr:'code', onValue:option=>setData.call(this,option,'reference_max_type') },
			{ label: '',  						name: 'reference_min_val', 		width:'21%', 	type:'number', style:{paddingLeft:10}, p:'参考值（低）' },
			{ label: '参考值(高)',  				name: 'reference_max_type', 	width:'29%', 	type:'select', idStr:'code', onValue:option=>setData.call(this,option,'reference_min_type') },
			{ label: '',  						name: 'reference_max_val', 		width:'21%', 	type:'number', style:{paddingLeft:10}, p:'参考值（高）' },
			
			{ label: '参考值描述',  				name: 'description', 									half:true, type:'textarea' },
			{ label: '参考值描述(英)',  			name: 'description_en', 								half:true, type:'textarea' },
			{ label: '参考值报告单打印',  		name: 'print_report', 									half:true, type:'textarea' },
			{ label: '参考值报告单打印(英)',  	name: 'print_report_en', 								half:true, type:'textarea' },
			{ label: '危急值描述',  				name: 'crisis_value_desc', 								half:true, type:'textarea' },
		],
	}
	
	model = {}
	
	componentDidMount(){
		const { kind_id } = this.props
		this.model = { kind_id }
		this.submit = { kind_id }
		this.fetch()
	}
	// 获取弹框下拉
	getModalSelect = async () => {
		const { formData } = this.state
		$fn.setModalRows(formData, [ 'sex','age_unit' ], ()=>{
			$cache.then( async f => {
				// 字典
				const dic = await f.getDicCache({ code: [ 45700, 30000, 1300 ]})
				// 性别
				$fn.setRow(formData, 'sex', dic['45700'])
				// 年龄单位
				$fn.setRow(formData, 'age_unit', dic['30000'])
				
				this.value = dic['1300']
				// 年龄
				$fn.setRow(formData, 'age_min_type', this.value)
				$fn.setRow(formData, 'age_max_type', this.value)
				// 危急值
				$fn.setRow(formData, 'crisis_min_type', this.value)
				$fn.setRow(formData, 'crisis_max_type', this.value)
				// 参考值
				$fn.setRow(formData, 'reference_min_type', this.value)
				$fn.setRow(formData, 'reference_max_type', this.value)
				//
				this.setState({ formData })
			})
		})
	}
	// paging
	fetch = () => $fn.fetch.call(this,'kd-reference-range/index', { paging:'get' })
	
	// 表单
	// 新增排序 20220701 耿琰
	cols = [
		{ title: '排序', 				dataIndex: 'sort', 					...$fn.table.num },
		{ title: '参考值代码', 			dataIndex: 'reference_code', 		width:150 },
		{ title: '参考别名名称', 		dataIndex: 'ref_type_name', 		width:250 },
		{ title: '参考别名名称(英文)', 	dataIndex: 'en_ref_type_name', 		width:150 },
		{ title: '性别', 				dataIndex: 'sex_name', 				width:80 },
		{ title: '年龄值(低)', 			dataIndex: 'age_min_val', 			width:200, render:(text,{age_min_type_name,age_min_val})=>age_min_val ? age_min_type_name + age_min_val : '--' },
		{ title: '年龄值(高)', 			dataIndex: 'age_max_val', 			width:150, render:(text,{age_max_type_name,age_max_val})=>age_max_val ? age_max_type_name + age_max_val : '--' },
		{ title: '年龄单位', 			dataIndex: 'age_unit_name', 		width:150 },
		{ title: '危急值(低)', 			dataIndex: 'crisis_min_val', 		width:100, render:(text,{crisis_min_type_name,crisis_min_val})=>crisis_min_val ? crisis_min_type_name + crisis_min_val : '--' },
		{ title: '危急值(高)', 			dataIndex: 'crisis_max_val', 		width:100, render:(text,{crisis_max_type_name,crisis_max_val})=>crisis_max_val ? crisis_max_type_name + crisis_max_val : '--' },
		{ title: '参考值(低)', 			dataIndex: 'reference_min_val', 	width:100, render:(text,{reference_min_type_name,reference_min_val})=>reference_min_val ? reference_min_type_name + reference_min_val : '--' },
		{ title: '参考值(高)', 			dataIndex: 'reference_max_val', 	width:100, render:(text,{reference_max_type_name,reference_max_val})=>reference_max_val ? reference_max_type_name + reference_max_val : '--' },
		{ title: '参考值描述', 			dataIndex: 'description', 			width:100 },
		{ title: '参考值描述(英)', 		dataIndex: 'description_en', 		width:100 },
		TableControls.controls.call(this,{ width: 80,  })
	]
	// 表格操作按钮
	table_controls = (text,{ uuid }) => {
		return [
			TableControls.edit.call(this,'kd-reference-range/info', { uuid }, {
				select: this.getModalSelect,
				load: ({ age_min_type, age_max_type, crisis_min_type, crisis_max_type, reference_min_type, reference_max_type }) => {
					const { formData } = this.state
					
					age_min_type && setData.call(this,{ formData, value:age_min_type },'age_max_type')
					age_max_type && setData.call(this,{ formData, value:age_max_type },'age_min_type')
					
					crisis_min_type && setData.call(this,{ formData, value:crisis_min_type },'crisis_max_type')
					crisis_max_type && setData.call(this,{ formData, value:crisis_max_type },'crisis_min_type')
					
					reference_min_type && setData.call(this,{ formData, value:reference_min_type },'reference_max_type')
					reference_max_type && setData.call(this,{ formData, value:reference_max_type },'reference_min_type')
				},
				disabled: this.props.disabled
			})
		]
	}
	// 操作按钮
	controls = () => {
		const { disabled } = this.props
		return [
			Controls.add.call(this,{click:this.getModalSelect, code:false, disabled}),
			Confirm.call(this,'删除', 'kd-reference-range/delete', { isKeys: true, ghost:true, disabled }),
		]
	}
	render(){
		let title = '参考范围'
		const { disabled } = this.props
		return (
			<>
				<Box key={disabled} title={title} controls={this.controls()} className='mt5'  contentClassName='pt10'>
					{/* 表格 */}
					{ Table.call(this, { wrapStyle: this.props.tableStyle, ...this.props, disabled }) }
				</Box>
				{/* 添加 */}
				{ AddEditModal.call(this,{ title, labelWidth:'s11', width:'99%', height:'99%',scroll:true, api:'kd-reference-range/add', editApi:'kd-reference-range/edit'}) }
			</>
		)
	}
}

export default Index